<template>
  <div class="gaisu">
    <GongYong></GongYong>
    <main>
      <div class="gatt">
        <el-col :span="8">
          <el-card shadow="always">
            <b>4</b>
            <p>总是显示</p>
          </el-card>
          <el-card shadow="always" style="background: #F56C6C;">
            <b>1</b>
            <p>总是显示</p>
          </el-card>
          <el-card shadow="always" style="background:rgba(15, 173, 85, 0.8);">
            <b>1</b>
            <p>总是显示</p>
          </el-card>
          <el-card shadow="always" style="background: #E6A23C;">
            <b>0</b>
            <p>总是显示</p>
          </el-card>
          <el-card shadow="always" style="background:rgba(134, 231, 49, 0.8);">
            <b>0</b>
            <p>总是显示</p>
          </el-card>
          <el-card shadow="always" style="background: #F56C6C;">
            <b>0</b>
            <p>总是显示</p>
          </el-card>
          <el-card shadow="always">
            <b>0</b>
            <p>总是显示</p>
          </el-card>
        </el-col>
      </div>
      <div class="toppet">
        <h4>订单金额与数量</h4>
         <div id="main"></div>
      </div>
    </main>
  </div>
</template>

<script>
import GongYong from "../shangpin/gongyong"
import * as echarts from 'echarts';
export default {
  name: "Gaisu",
  components: {
    GongYong
  },
  mounted() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
  const colors = ['#5470C6', '#EE6666'];
option = {
  color: colors,
  tooltip: {
    trigger: 'none',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {},
  grid: {
    top: 70,
    bottom: 50
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[1]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              '订单金额  ' +
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            );
          }
        }
      },
      // prettier-ignore
      data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
    },
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[0]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              '订单数量  ' +
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            );
          }
        }
      },
   
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '订单金额',
      type: 'line',
      xAxisIndex: 1,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: '订单数量',
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
      ]
    }
  ]
};

option && myChart.setOption(option);


  }
}
</script>

<style scoped lang="scss">
.gaisu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}
.el-col {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;

  .el-card {
    width: 13%;
    height: 150px;
    background: cornflowerblue;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    b {
      font-weight: bolder;
      font-size: 40px;
      color: #fff;
    }
    p {
      padding: 10px 0;
      color: #fff;
      font-weight: bolder;
    }
  }
}
.is-always-shadow {
  width: 100%;
}
.gatt{
  width:100%;
  height:160px;
}
.toppet{
  width: 100%;
  height: 500px;
  h4{
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding:0 40px;
     font-size: 20px;
  }
}

#main {
  width: 100%;
  height: 100%;
  background: #fff;
 
}
</style>